<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 查看邮件</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/ship/bootstaptoast/bootaost.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager" style="font-size: 14px;margin-left: 15px">

                        <ul class="folder-list m-b-md" style="padding: 0px">
                            <li>
                                <a href="toSystemHome.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0"></i>企业信息</a>
                            </li>
                            <li>
                                <a href="toPersonalInfo.do" style="color: #0d8ddb;font-weight: 700"> <i class="fa fa-circle text-navy" style="color: #0d8ddb;"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="toStaffInfo.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0"></i>员工管理</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toGoodName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货种名称配置</a>
                            </li>
                            <li>
                                <a href="toGooderName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货主名称配置</a>
                            </li>
                            <li>
                                <a href="toLogistics.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>港口名称配置</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toRecharge.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>账户充值</a>
                            </li>
                            <li>
                                <a href="toRechargeDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>充值记录</a>
                            </li>
                            <li>
                                <a href="toExpensesDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>消费记录</a>
                            </li>
                            <li>
                                <a href="toFindShipDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>找船记录</a>
                            </li>
                        </ul>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="mail-box">
                <div class="mail-body" style="height: 660px">
                    <div class="row">
                        <div class="col-sm-6"> <h3>个人信息管理</h3></div>
                        <div class="col-sm-6">   <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#personalPasswordModel">修改密码</button></div>
                    </div>

                    <hr class="simple" color="#6f5499"/>
                    <div class="row" style="margin-top: 20px">
                        <div class="col-sm-6">姓名：<span id="account"></span></div>
                        <div class="col-sm-6"></div>
                    </div>

                    <div class="row" style="margin-top: 10px">
                        <div class="col-sm-6">手机号：<span id="phoneNum"></span>
                            <%--<span style="color: #0d8ddb;cursor: pointer" data-toggle="modal" data-target="#personalMobileModel">修改</span>--%>
                        </div>
                        <div class="col-sm-6"></div>
                    </div>
                    <div id = "wxBindDiv">
                        <input id = "wxBindInput" style="display: none" value="<%=request.getSession().getAttribute("SESSION_WX_BIND") %>"/>
                        <input id = "msgInput" style="display: none" value="$(MSG)"/>
                        <input id = "successInput" style="display: none" value="$(SUCCESS)"/>
                        微信登录绑定
                        <div id="wxBindontainer">
                        </div>
                    </div>

                </div>
                <div class="clearfix">
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<%--修改密码模态框--%>
<div class="modal fade" id="personalPasswordModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h3 class="modal-title">
                    修改密码
                </h3>
            </div>
            <div class="modal-body">

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" style="line-height: 36px;">原密码：</label>
                                <div class="col-sm-8">
                                    <input id="oldPassword" name="oldPassword" class="form-control" type="password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" style="line-height: 36px;">新密码：</label>
                                <div class="col-sm-8">
                                    <input id="newPassword" name="newPassword" class="form-control" onblur="checkPwd()" type="password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <P id="checkPassword" style="line-height: 20px; font-size: 14px;margin-left:120px;">&nbsp;</P>
                    <div class="row" style="margin-top: 10px">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" style="line-height: 36px;">确认密码：</label>
                                <div class="col-sm-8">
                                    <input id="confirmPassword" name="endTime" class="form-control" onblur="checkRepwd()" type="password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <P id="checkRepassword" style="line-height: 20px; font-size: 14px;margin-left:120px;">&nbsp;</P>
                    <div class="row" style="margin-top: 10px">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-3 control -label"></label>
                                <div class="col-sm-8">
                                    <button class="btn btn-primary pull-left"  id="sureToModify" type="submit">确认修改</button>
                                </div>
                            </div>
                        </div>
                    </div>

            </div>
        </div>
    </div>
</div>
<!-- end -->

<%--修改手机号模态框--%>
<div class="modal fade" id="personalMobileModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:40%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h3 class="modal-title">
                    修改手机号
                </h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="col-sm-8">
                                <input id="phone" name="endTime" class="form-control" type="text" placeholder="请输入新手机号">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 15px">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">验证码：</label>
                            <div class="col-sm-3" style="margin-left: 15px">
                                <div class="row">
                                    <input type="text" placeholder="请输入验证码" class="form-control" id="phoneNumber">
                                </div>
                            </div>
                            <div class="col-sm-3" style="margin-left: 10px">
                                <div class="row">
                                    <button class="btn btn-primary" onclick="getCode(this)" id="J_getCode">获取验证码</button>
                                    <button class="btn btn-primary" id="J_resetCode" style="display: none;"><span id="J_second">60</span>秒后重发</button>
                                </div>
                            </div>
                            <div class="col-sm-2">

                            </div>
                        </div>
                    </div>
                </div>
                    <div class="row" style="margin-top: 15px">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-8">
                                    <button class="btn btn-primary pull-left" type="submit" id="modifyPhoneNumber">确认修改</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
<!-- end -->


<!-- 全局js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/content.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/wxLogin.js"></script>
<script src="${pageContext.request.contextPath}/assets/ship/bootstaptoast/bootoast.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>

<script type="text/javascript">
    //新旧密码不能一致
    function checkPwd(){
        if (!$('#oldPassword').val() || !$('#newPassword').val()) {
            alert("新旧密码信息不能为空");
            return  false;
        }
        var oldPassword=document.getElementById("oldPassword").value;
        var newPassword=document.getElementById("newPassword").value;
        var p=document.getElementById("checkPassword");
        if(oldPassword==newPassword){
            p.innerHTML="新旧密码不能一致";
            p.style.color="red";
            return false;
        }else{
            p.innerHTML="&nbsp;";
            return true;
        }
    }

    //判断两次输入的新密码一不一致
    function checkRepwd(){
        var newPassword=document.getElementById("newPassword").value;
        var confirmPassword=document.getElementById("confirmPassword").value;
        var p=document.getElementById("checkRepassword");
        if(newPassword!=confirmPassword){
            p.innerHTML="两次输入的新密码不一致";
            p.style.color="red";
            return false;
        }else{
            p.innerHTML="&nbsp;";
            return true;
        }
    }

    //修改密码
    $("#sureToModify").click(function(){
        if (!$('#oldPassword').val() || !$('#newPassword').val()  || !$('#confirmPassword').val()) {
            alert("密码信息不能为空");
            return  false;
        }
        var data=JSON.stringify({oldPassword:$('#oldPassword').val(),newPassword:$('#newPassword').val()})
            $.ajax({
            url:'user/editPassword.do',
            data:data,
            type:'post',
            contentType:'application/json',
            dataType:'json',
            success:function(result){
                swal({
                    title: "修改成功!",
                    type: "success"
                });
                location.href="toPersonalInfo.do";
            }
        })
    });

    //个人信息管理
    $.ajax({
        url:'user/queryUser.do',
        type:'GET',
        contentType:'application/json',
        dataType:'json',
        success: function(result){
            $('#account').text(result.userName);
            $('#phoneNum').text(result.phoneNum);
        }
    });

    //	获取验证码
    var isPhone = 1;
    function getCode(e){
        checkPhone(); //验证手机号码
        if(isPhone){
            resetCode(); //倒计时
        }else{
            $('#phone').focus();
        }
    }
    //	验证手机号码
    function checkPhone(){
        var phone = $('#phone').val();
        var pattern = /^1[0-9]{10}$/;
        isPhone = 1;
        if(phone == '') {
            bootoast({
                message: '请输入手机号！',
                type: 'danger',
                position:'top-center',
                timeout:2
            });
            isPhone = 0;
            $("#phoneNumber").focus();
            return;
        }
        if(!pattern.test(phone)){
            bootoast({
                message: '请输入正确的手机号码！',
                type: 'danger',
                position:'top-center',
                timeout:2
            });
            isPhone = 0;
            return;
        }
    }
    //	倒计时
    function resetCode(){
        $('#J_getCode').hide();
        $('#J_second').html('60');
        $('#J_resetCode').show();
        var second = 60;
        var timer = null;
        timer = setInterval(function(){
            second -= 1;
            if(second >0 ){
                $('#J_second').html(second);
            }else{
                clearInterval(timer);
                $('#J_getCode').show();
                $('#J_resetCode').hide();
            }
        },1000);
    }
    $(function(){
        <%--if (${MSG}) {--%>
            <%--alert(${MSG});--%>
        <%--}--%>
        var wxBind = $("#wxBindInput").val();
        if ("Y" == wxBind) {
            $("#wxBindDiv").attr("style","display:none");
        }
        else {
            $("#wxBindDiv").attr("style","display:block");
            $.ajax({
                url:'user/getWxBindUrl.do',
                type:'GET',
                dataType:'json',
                contentType:'application/json',
                success:function(result){
                    var obj = new WxLogin({
                        self_redirect:false,
                        id:"wxBindontainer",
                        appid: result.appId,
                        scope: "snsapi_login",
                        redirect_uri: result.redirectUri,
                        state: result.state,
                        style: "",
                        href: ""
                    });
                }
            });
        }


        var phone = $('#phone').val();
        var pattern = /^1[0-9]{10}$/;
        //	注册按钮验证 事件
        $(".btn-register").click(function(){
            if($("#phone").val()==''){
                bootoast({
                    message: '请输入手机号码！',
                    type: 'danger',
                    position:'top-center',
                    timeout:2
                });
                $("#phone").focus();
                return;
            }
            if (!$("#phone").val().match(/^1[3|4|5|7|8]\d{9}$/)) {
                bootoast({
                    message: '请输入正确的手机号码！',
                    type: 'danger',
                    position:'top-center',
                    timeout:2
                });
                $("#phone").focus();
                return false;
            }
            if($(".idcode").val()==''){
                bootoast({
                    message: '请输入验证码！',
                    type: 'danger',
                    position:'top-center',
                    timeout:2
                });
                $(".idcode").focus();
                return;
            } else
            if (!$(".code").val().match(/^1[3|4|5|7|8]\d{9}$/)) {
                bootoast({
                    message: '请输入正确的手机号码！',
                    type: 'danger',
                    position:'top-center',
                    timeout:2
                });
                $(".code").focus();
                return false;
            }else{
                return true;
            }

        })
    })
</script>
</body>

</html>
